<script>
import { defineComponent, ref, watch, computed } from 'vue'
import { createNamespace, transformSize } from '../utils'
import FanIcon from '../icon/icon.vue'

export default defineComponent({
	name: createNamespace('Rate')[0],
	options: {
		// https://uniapp.dcloud.io/matter.html#mp
		virtualHost: true
	},
	components: { FanIcon },
	props: {
		// 当前评分
		modelValue: {
			type: [Number, String],
			default: 1
		},
		// 图标名称
		icon: {
			type: String,
			default: 'star-fill'
		},
		// 星星未选中的颜色
		color: {
			type: String,
			default: '#ececec'
		},
		// 星星选中状态颜色
		activeColor: {
			type: String,
			default: '#ffca3e'
		},
		// 星星禁用状态颜色
		disabledColor: {
			type: String,
			default: '#c0c0c0'
		},
		// 星星的大小
		size: {
			type: [Number, String],
			default: 24
		},
		// 图标总数
		count: {
			type: [Number, String],
			default: 5
		},
		// 星星的间距
		space: [String, Number],
		// 是否可点击
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否只读
		readonly: {
			type: [Boolean, String],
			default: true
		},
		// 是否显示半星
		allowHalf: {
			type: [Boolean, String],
			default: false
		},
		// todo: 是否支持滑动手势
		touchable: {
			type: [Boolean, String],
			default: false
		}
	},
	emits: ['update:modelValue', 'change'],
	setup(props, context) {
		const theStyle = computed(() => {
			const { space } = props
			const s = space ? `--fan-rate-space:${transformSize(space)};` : ''
			return s
		})

		const value = ref(0)
		watch(
			() => props.modelValue,
			(val) => {
				const n = Number(val) || 0
				if (value.value === n) return
				value.value = n
			},
			{ immediate: true }
		)
		watch(value, (val) => {
			if (val === props.modelValue) return
			context.emit('update:modelValue', val)
			context.emit('change', val)
		})

		const stars = computed(() => {
			const val = value.value
			const list = []
			const floorValue = Math.floor(val)
			const ceilValue = Math.ceil(val)
			for (let i = 0; i < props.count; i++) {
				let activeWidth = '0'
				if (floorValue > i) {
					activeWidth = '100%'
				} else if (ceilValue - 1 === i) {
					activeWidth = (val - floorValue) * 100 + '%'
				}
				list.push({ activeWidth })
			}
			return list
		})

		return { theStyle, stars }
	}
})
</script>

<template>
	<div :style="theStyle" class="fan-rate">
		<div v-for="(star, index) in stars" :key="index" class="fan-rate__icon">
			<FanIcon :color="color" :size="size" :name="icon" />
			<!-- #ifndef APP-NVUE -->
			<div :style="{ width: star.activeWidth }" class="fan-rate__icon-on">
				<FanIcon :color="disabled ? disabledColor : activeColor" :size="size" :name="icon" />
			</div>
			<!-- #endif -->
		</div>
	</div>
</template>

<style lang="less">
.fan-rate {
	--fan-rate-space: 3px;

	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	line-height: 1;
	font-size: 0;
	flex-direction: row;
}

.fan-rate__icon {
	position: relative;
	margin-right: var(--fan-rate-space);

	&:last-child {
		margin-right: 0;
	}
}

.fan-rate__icon-on {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
</style>